<template>
    <div class="login">
        <div class="login-box">
            <div @click="closeLogin" class="close-window">
                <Icon type="close-round"></Icon>
            </div>
            <div class="title">
                <h2 class="clearfix">
                    <span>会员登录</span>
                    <p>还没有账号&nbsp;&nbsp;<a @click="reg">立即注册</a></p>
                </h2>
            </div>
            <Form ref="login-form" :model="form" :rules="rules">

                <Form-item prop="phone">
                    <Input type="text" v-model="form.phone" placeholder="Phone" @keyup.native.enter="doLogin">
                    <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="form.password" placeholder="Password" @keyup.native.enter="doLogin">
                    <!--<Icon type="ios-person-outline" slot="prepend"></Icon>-->
                    </Input>
                </Form-item>
                <Form-item>

                    <Button type="success" long @click.stop="doLogin"> 登 录 </Button>

                    <a href="javascript:;" @click="forgot">忘记密码？</a>

                </Form-item>
                <Form>
                    <header class="be divider">
                        第三方帐号登录
                    </header>
                    <!--<div style="text-align: center">
                        <span @click="weixin_login" class="fa-stack" style="margin-right:.5em;">
                            <i style="color:green" class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-wechat fa-stack-1x fa-inverse"></i>
                         </span>
                        <span @click="qq_login" class="fa-stack" style="margin-left:.5em;">
                            <i style="color:#3DA9F6" class="fa fa-circle fa-stack-2x"></i>
                            <i class="fa fa-qq fa-stack-1x fa-inverse"></i>
                        </span>
                    </div>-->
                    <div class="oauth clearfix">
				        <a class="qq" @click="qq_login">
				            <i></i>
				            <span>QQ账号登录</span>
				        </a>
				        <a class="wechat" @click="weixin_login">
				            <i></i>
				            <span>微信账号登录</span>
				        </a>
				    </div>
                </Form>
            </Form>
        </div>
    </div>
</template>
<style scoped>
    body {
        background-color: #eff2f7;
    }

    .login {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        /*background: url(../../assets/images/banner3.jpg)no-repeat 0 0 ;*/
        background-size: 100%;
        z-index: 999;
        left:0;
        top:0;
    }

    .login-box {
        background-color: #fff;
        padding: 20px 30px;
        max-width: 400px;
        width:90%;
        /*position: absolute;
        right: 4%;
        top: 15%;*/
        margin: 0 auto;
        position: relative;
        top: 120px;
        border-radius: 0;

    }

    h1 {
        text-align: center;
    }

    .be.divider {
        position: relative;
        overflow: hidden;
        clear: both;
        height: auto;
        margin: 1em 0;
        line-height: 1;
        text-align: center;
    }

    .be.divider:before, .be.divider:after {
        box-sizing: inherit;
        position: absolute;
        content: '';
        z-index: 1;
        width: 50%;
        top: 50%;
        height: 0;
        border-top: 1px solid #e0e0e0;
    }

    .be.divider:before {
        margin-left: calc(-51.5%);
    }

    .be.divider:after {
        margin-left: 1em;
    }
    .close-window{
        padding:10px;
        position:absolute;
        right: 20px;
        top:10px;
        cursor: pointer;
    }
    .close-window:hover{
        color: #15ccac;
    }
    .title{ margin-top: 30px; margin-bottom:30px;}
    .title h2{ text-align:center;}
    .title h2 span{ font-size:26px; float: left;}
    .title p{ float: right; font-size:16px; color:#999; position: relative; top:10px;}
    .title p a{ color:#15ccac;}
    .oauth{ padding-bottom:20px;}
    .qq,.wechat{ box-sizing:border-box; width:40%; float: left; padding:5px 10px; color:#fff; display:flex; align-content:center; margin-top:20px; border-radius:3px;}
    .qq{ background:#1296db;}
    .wechat{ background:#0fd01c; margin-left:20%;white-space: nowrap;}
    .qq i,.wechat i{ width:20px; height:20px; float: left;}
    .qq i{ background:url('../../assets/images/icon/qq.svg') no-repeat; background-size:100% 100%;}
    .wechat i{ background:url('../../assets/images/icon/wechat.svg') no-repeat; background-size:100% 100%;}
    .qq span,.wechat span{ margin-left:10px; position: relative; top:3px;}
		.black-ipt{border-radius: 0;border: 1px solid #000000 !important;}
    @media (max-width:992px){
        .login-box {
            padding:15px 20px;
        }
        .oauth a{
            display: flex;
            justify-content: center;
        }
        .oauth span{
            display: none;
        }
    }
</style>

<script>
    import { setToken } from '../../utils/auth.js';
    export default {
        data() {
            return {
                form: {
                    email: null,
                    password: null,
                    status: 'SHIP'
                },

                rules: {
                    phone: [{
                            required: true,
                            pattern: /^((0\d{2,3}\d{7,8})|(1[35874]\d{9}))$/,
                            message: '请输入正确的账号',
                            trigger: 'blur,change'
                        }],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            created(){
                var index = location.search.indexOf('=');
                if(index > 0){
                    var token = location.search.substr(index+1);
                    window.localStorage.setItem('ccm-token', token);
                }
            },
            //微信登录
            weixin_login() {
                this.$http.get('/wechatUrl').then(response => {
                    location.href = response.data.url
                    sessionStorage['source_url'] = this.$route.fullPath;
                }).catch(error => {

                })
            },
            //qq登录
            qq_login() {
                this.$http.get('/qqUrl').then(response => {
                    //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
                    //否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
                    location.href = response.data.url;
                    sessionStorage['source_url'] = this.$route.fullPath;
                }).catch(error => {

                })
            },
            // 登录提交
            doLogin() {
                this.$refs['login-form'].validate((valid) => {
                    if (valid) {
                        this.$http.get('member/oauth', {
                            params: this.form
                        }).then(response => {
                            //window.localStorage.setItem('ccm-token', response.data.token);
                            this.$store.dispatch('setToken',response.data.token)
                            .then(_=>{
                                setToken(response.data.token);
                            })
                            this.$Notice.success({title: '登录成功'});
                            // 跳转
                            location.href = location.href;
                        }).catch(error => {
                            this.$Notice.error({
                                desc: '账号或密码错误，或者管理员未审核该账号！',
                            });
                        })
                    }
                });
            },
            closeLogin(){
                this.$store.dispatch('login',false)
            },
            forgot(){
                this.$store.dispatch('login',false);
                this.$store.dispatch('changeRegState',false);
                this.$store.dispatch('forgot',true);
            },
            reg(){
                this.$store.dispatch('changeRegState',true);
                this.$store.dispatch('login',false)
            }
        }
    }
</script>

